<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">欢迎你，{{ username }}</div>

      <leftmenu :menu_number="1"></leftmenu>
    </a-layout-sider>
    <a-layout>
      <headmenu></headmenu>
      <!-- <a-layout-header style="background: #fff; padding: 0">
        <a-row style="background: #6495ed; height: 50px">
          <a-col :span="24">
            <a-icon
              class="trigger"
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="() => (collapsed = !collapsed)"
            />
            <a-button @click="delete_userinfo">退出登录</a-button>

            <span>
              <a-badge count="2" style="margin-left: 60%">
              <img src="static\邮件图标.jpg" style="width: 20px" />
              <a href="#" class="head-example" />
            </a-badge>

            <a-badge count="5" style="margin-left: 1%">
              <img src="static\铃铛.jpg" style="width: 20px" />
              <a href="#" class="head-example" />
            </a-badge>

            <a-badge count="5" style="margin-left: 30px">
              <img src="static\旗帜.jpg" style="width: 20px" />
              <a href="#" class="head-example" />
            </a-badge>
            <a-avatar :src="photo_url" style="margin-left: 30px" />
            {{username}}
            </span>
          </a-col>
        </a-row>

      </a-layout-header> -->
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '500px',
        }"
      >
        <a-table bordered :data-source="dataSource" :columns="columns">
          <template slot="operation" slot-scope="text, record">
            <a-popconfirm
              title="是否删除"
              @confirm="() => user_delete(record.uid)"
            >
              <a href="Javascript:void(0)">删除</a>
            </a-popconfirm>
            <a-popconfirm
              title="是否修改"
              @confirm="() => update_user(record.uid)"
            >
              <a href="Javascript:void(0)">修改</a>
            </a-popconfirm>
          </template>
        </a-table>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>


 
<script>
import md5 from "js-md5";
import { get_user, delete_user } from "./axios_http/api";
import severurl from '../main'
// 导入组件
import leftmenu from "./leftmenu.vue";
import headmenu from "./headmenu.vue";

export default {
  data() {
    return {
      msg: "这是一个变量",
      collapsed: false,
      username: localStorage.getItem("username"),
      // 列
      columns: [
        { title: "uid", dataIndex: "uid" },
        { title: "username", dataIndex: "username" },
        { title: "nickname", dataIndex: "nickname" },
        { title: "phone", dataIndex: "phone" },
        { title: "email", dataIndex: "email" },
        // 指定操作列
        {
          title: "operation",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      // 具体数据
      dataSource: [],
    };
  },
  //注册组件标签
  components: {
    leftmenu: leftmenu,
    headmenu: headmenu,
    collapsed: false,
  },
  mounted: function () {
    var ed2020 = "2020";

    var sign = md5("price=500&goodid=3,1" + ed2020);

    console.log(sign);
  },
  methods: {

    openNotification(placement,text) {
      this.$notification.open({
        message: `审批情况`,
        description:
          '你有'+text+'条新消息',
        placement,
      });
    },

    // 删除操作
    user_delete(uid) {
      console.log(uid);
      delete_user({ data: { uid: uid } }).then((resp) => {
        this.$message.info(resp.data);
        if (resp.code == 200) {
          location.reload();
        }
      });
    },
    update_user(uid) {
      this.$router.push({ path: "/updateuser", query: { uid: uid } });
    },
    delete_userinfo() {
      localStorage.clear();
      this.$router.push("/login");
    },
  },
  created() {
    
    get_user().then((resp) => {
      console.log(resp.data);
      if (resp.code == 200) {
        this.dataSource = resp.data;
      } else {
        this.$router.push("/login");
      }
    });

    // 判断浏览器是否支持websocket
    if ("WebSocket" in window) {
      console.log("支持");
      // 生产websocket链接
      var ws = new WebSocket("ws://192.168.1.65:8000/myapp/websocketlink/");

      // 发送链接请求
      ws.onopen = function () {
        console.log("JWT " + localStorage.getItem("token"));
        ws.send("JWT " + localStorage.getItem("token"));
      };

      // 发送消息
      ws.onmessage = (evt) => {
        // 将获取信息打印
        console.log("hhh");
        var received_msg = evt.data;
        this.message_num = evt.data;
        localStorage.setItem("num", evt.data)
        this.openNotification("bottomRight", evt.data);
      };
      // 捕获关闭链接
      ws.onclose = function () {
        console.log("链接已经关闭");
      };
    }


  },
};
</script>
 
<style scoped>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>